<template>
	<base-page>
		<view class="goodslist">
			<view class="screen-warp common-form">
				<view class="common-form-item">
					<view class="form-inline">
						<label class="form-label">商品名称</label>
						<view class="form-input-inline"><input type="text" v-model="option.search_text"
								placeholder="请输入商品名称" class="form-input" /></view>
					</view>
					<view class="form-inline">
						<label class="form-label">商品编码</label>
						<view class="form-input-inline"><input type="text" v-model="option.sku_no" placeholder="请输入商品编码"
								class="form-input" /></view>
					</view>
					<view class="form-inline">
						<label class="form-label">商品类型</label>
						<view class="form-input-inline">
							<select-lay :zindex="10" :value="goods_class" name="names" placeholder="请选择商品类型"
								:options="goodsClass" @selectitem="selectClass"></select-lay>
						</view>
					</view>
					<view class="form-inline">
						<label class="form-label">商品状态</label>
						<view class="form-input-inline">
							<select-lay :zindex="10" :value="status" name="names" placeholder="请选择商品状态"
								:options="statusList" @selectitem="selectStatus"></select-lay>
						</view>
					</view>
					<view class="form-inline">
						<label class="form-label">商品价格</label>
						<view class="form-input-inline input-append">
							<input type="text" v-model="option.start_price" placeholder="最低价格" class="form-input" />
							<view class="unit">元</view>
						</view>
						<view class="form-input-inline split-wrap">-</view>
						<view class="form-input-inline input-append">
							<input type="text" v-model="option.end_price" placeholder="最高价格" class="form-input" />
							<view class="unit">元</view>
						</view>
					</view>
					<view class="form-inline common-btn-wrap">
						<button type="default" class="screen-btn" @click="searchFn()">筛选</button>
						<button type="default" @click="resetFn()">重置</button>
						<button type="default" class="screen-btn" @click="synchronous()"
							v-if="syncWeighGoods">同步称重商品</button>
					</view>
				</view>
			</view>
			<uniDataTable url="/cashier/storeapi/goods/page" :option="option" :cols="cols" ref="goodsListTable">
				<template v-slot:action="dataTable">
					<view class="action-btn-wrap">
						<text class="action-item" @click="getDetail(dataTable.value.goods_id)">详情</text>
						<text class="action-item"
							v-if="dataTable.value.store_status == 0 || dataTable.value.store_status == null"
							@click="goodsStatus(dataTable.value.goods_id, 1)">
							上架
						</text>
						<text class="action-item" v-else @click="goodsStatus(dataTable.value.goods_id, 0)">下架</text>
						<text class="action-item" @click="goodsSku(dataTable.value.goods_id)"
							v-if="(storeInfo && storeInfo.stock_type == 'store') || dataTable.value.is_unify_price != 1">
							价格库存
						</text>
						<text class="action-item" @click="recordopen(dataTable.value.goods_id)"
							v-if="dataTable.value.is_virtual != 1 && storeInfo && storeInfo.stock_type == 'store'">
							库存记录
						</text>
					</view>
				</template>
				<template v-slot:batchaction="dataTable">
					<text class="batch-item" @click="goodsStatus(dataTable, 1)">批量上架</text>
					<text class="batch-item" @click="goodsStatus(dataTable, 0)">批量下架</text>
				</template>
			</uniDataTable>

			<unipopup ref="goodsDetail" type="center">
				<view class="goods-detail-wrap">
					<view class="detail-head">
						商品详情
						<text class="iconfont iconguanbi1" @click="$refs.goodsDetail.close()"></text>
					</view>
					<view class="detail-body">
						<block v-if="JSON.stringify(goods_detail) != '{}'">
							<view class="title">基本信息</view>
							<view class="information-box">
								<view class="box-left">
									<view class="information">
										<view>商品名称：</view>
										<view>{{ goods_detail.goods_name }}</view>
									</view>
									<view class="information" v-if="goods_detail.introduction">
										<view>促销语：</view>
										<view>{{ goods_detail.introduction }}</view>
									</view>
									<view class="information">
										<view>商品类型：</view>
										<view>{{ goods_detail.goods_class_name }}</view>
									</view>
									<view class="information" v-if="goods_detail.brand_name">
										<view>商品品牌：</view>
										<view>{{ goods_detail.brand_name }}</view>
									</view>
									<view class="information" v-if="goods_detail.unit">
										<view>单位：</view>
										<view>{{ goods_detail.unit }}</view>
									</view>
									<view class="information" v-if="goods_detail.goods_class == 6">
										<view>计价方式：</view>
										<view>{{ goods_detail.pricing_type == 'num' ? '计数' : '计重' }}</view>
									</view>
									<view class="information">
										<view>商品状态：</view>
										<view>
											{{ goods_detail.store_status == 0 || goods_detail.store_status == null ? '仓库中' : '已上架' }}
										</view>
									</view>
								</view>
								<!-- <image class="goods-img" :src="$util.img(goods_detail.goods_image.split(',')[0], {'size':'big'})" mode="aspectFit" @error="goodsImageError(goods_detail)"></image> -->
							</view>
							<block v-if="goods_detail.sku_list.length > 1">
								<view class="title title2">价格库存</view>
								<view class="table">
									<view class="table-th table-all">
										<view class="table-td" style="width:25%">商品规格</view>
										<block v-if="goods_detail.is_unify_price">
											<view class="table-td" style="width:30%">销售价格</view>
										</block>
										<block v-else>
											<view class="table-td" style="width:15%">统一价格</view>
											<view class="table-td" style="width:15%">独立价格</view>
										</block>

										<view class="table-td" style="width:20%;">商品编码</view>
										<view class="table-td" style="width:10%;">商品库存</view>
									</view>
									<scroll-view class="table-tb" scroll-y="true">
										<view class="table-tr table-all" v-for="(item, index) in goods_detail.sku_list"
											:key="index">
											<view class="table-td" style="width:25%">{{ item.spec_name }}</view>
											<block v-if="goods_detail.is_unify_price">
												<view class="table-td" style="width:30%">￥{{ item.discount_price }}
												</view>
											</block>
											<block v-else>
												<view class="table-td" style="width:15%">￥{{ item.discount_price }}
												</view>
												<view class="table-td" style="width:15%">￥{{ item.store_price }}</view>
											</block>
											<view class="table-td" style="width:20%;">{{ item.sku_no }}</view>
											<view class="table-td" style="width:10%;">{{ item.stock }}</view>
										</view>
									</scroll-view>
								</view>
							</block>
							<block v-else>
								<view class="title title2">规格详情</view>
								<view class="table">
									<view class="single-specification">
										<view class="item">
											<view class="name">商品售价：</view>
											<view class="message"
												v-if="goods_detail.is_unify_price == 1 || goods_detail.sku_list[0].store_price == null">
												￥{{ goods_detail.sku_list[0].discount_price }}
											</view>
											<view class="message" v-else>{{ goods_detail.sku_list[0].store_price }}
											</view>
										</view>

										<view class="item">
											<view class="name">商品编码：</view>
											<view class="message">
												{{ goods_detail.sku_list[0].sku_no ? goods_detail.sku_list[0].sku_no : '无' }}
											</view>
										</view>
										<view class="item">
											<view class="name">商品库存：</view>
											<view class="message">{{ goods_detail.sku_list[0].stock || 0 }}</view>
										</view>
									</view>
								</view>
							</block>
						</block>
						<block v-else>
							<image class="cart-empty" :src="$util.img('public/uniapp/cashier/cart_empty.png')"
								mode="widthFix"></image>
						</block>
					</view>
				</view>
			</unipopup>

			<unipopup ref="goodssku" type="center">
				<view class="record-body">
					<nsgoodssku v-if="sku_list.length" @close="close('goodssku')" :goods_id="goodsId"
						:is_unify_price="goods_detail.is_unify_price" :sku_list="sku_list"></nsgoodssku>
				</view>
			</unipopup>

			<unipopup ref="record" type="center">
				<view class="record-body">
					<nsrecord @close="close" :goods_id="goodsId" :sku_list="sku_list"></nsrecord>
				</view>
			</unipopup>
		</view>
		<nc-scale-goods ref="scaleGoods"></nc-scale-goods>
	</base-page>
</template>

<script>
	import nsExwarehouse from '@/components/ns-exwarehouse/ns-exwarehouse.vue';
	import nsrecord from '@/components/ns-record/ns-record.vue';
	import nsgoodssku from '@/components/ns-goods-sku/ns-goods-sku.vue';
	import uniDataTable from '@/components/uni-data-table/uni-data-table.vue';
	import ncScaleGoods from '@/components/nc-scale-goods/nc-scale-goods.vue';

	import unipopup from '@/components/uni-popup/uni-popup.vue';
	export default {
		components: {
			nsExwarehouse,
			unipopup,
			nsrecord,
			nsgoodssku,
			uniDataTable,
			ncScaleGoods
		},
		data() {
			return {
				//选中的商品下标
				selectGoodsKeys: 0,
				// 初始是请求第几页
				page: 1,
				// 每次返回数据数
				page_size: 20,
				//商品列表数据
				goods_list: [],
				// 第一次请求列表做详情渲染判断
				one_judge: true,
				//商品详情数据
				goods_detail: {},
				//获取文档数据
				documentTypeList: [],
				// 弹窗中所需要获取到的sku列表数据
				sku_list: [],
				//入库出库
				keys: 'input',
				goodsClass: [{
						value: 1,
						label: '实物商品'
					},
					{
						value: 4,
						label: '服务项目'
					},
					{
						value: 5,
						label: '卡项套餐'
					},
					{
						value: 6,
						label: '称重商品'
					}
				],
				statusList: [{
						value: 1,
						label: '仓库中'
					},
					{
						value: 2,
						label: '销售中'
					}
				],
				currGoodsClass: 'all',
				store: null,
				timeout: '', //节流，关闭定时器

				cols: [{
						width: 6,
						align: 'center',
						checkbox: true
					},
					{
						field: 'account_data',
						width: 20,
						title: '商品信息',
						align: 'left',
						templet: data => {
							let img = this.$util.img(data.goods_image);
							let html = `
							<view class="goods-content">
								<image class="goods-img" src="${img}" mode="aspectFit"></image>
								<text class="goods-name multi-hidden">${data.goods_name}</text>
							</view>
						`;
							return html;
						}
					},
					{
						width: 14,
						title: '商品类型',
						align: 'center',
						field: 'goods_class_name'
					},
					{
						width: 10,
						title: '价格',
						align: 'center',
						templet: function(data) {
							return '￥' + data.discount_price;
						}
					},
					{
						field: 'stock',
						width: 15,
						title: '库存',
						align: 'center'
					},
					{
						width: 15,
						title: '售卖模式',
						templet: data => {
							return (this.storeInfo.stock_type == 'store' ? '独立库存' : '统一库存') + ' | ' + (data
								.is_unify_price ? '统一设价' : '独立设价');
						}
					},
					{
						width: 15,
						title: '状态',
						align: 'center',
						templet: function(data) {
							var str = '';
							if (data.store_status == 1) {
								str = '销售中';
							} else if (data.store_status == 0) {
								str = '仓库中';
							}
							return str;
						}
					},
					{
						width: 20,
						title: '操作',
						align: 'left',
						action: true
					}
				],
				option: {
					page_size: 9,
					search_text: '',
					sku_no: '',
					goods_class: 'all',
					status: 'all',
					start_price: '',
					end_price: ''
				},
				status: '',
				goods_class: '',
				goodsId: ''
			};
		},
		onLoad() {
			this.store = uni.getStorageSync('store_info');
		},
		computed: {
			syncWeighGoods() {
				try {
					return this.addon.includes('weighgoods') && this.addon.includes('scale') && POS_;
				} catch (e) {
					return false
				}
			}
		},
		methods: {
			selectClass(index) {
				this.goods_class = index == -1 ? '' : this.goodsClass[index].value.toString();
			},
			selectStatus(index) {
				this.status = index == -1 ? '' : this.statusList[index].value.toString();
			},
			// 搜索商品
			searchFn() {
				if (this.status == 1) {
					this.option.status = 0
				} else if (this.status == 2) {
					this.option.status = 1
				} else {
					this.option.status = 'all'
				}
				this.option.goods_class = this.goods_class ? this.goods_class : 'all';
				this.$refs.goodsListTable.load({
					page: 1
				});
			},
			resetFn() {
				this.status = '';
				this.goods_class = '';
				this.option.status = 'all';
				this.option.goods_class = 'all';
				this.option.search_text = '';
				this.option.sku_no = '';
				this.option.start_price = '';
				this.option.end_price = '';
				this.$refs.goodsListTable.load({
					page: 1
				});
			},
			// 查询商品详情
			getDetail(id, type = '') {
				uni.showLoading({
					title: '加载中'
				});
				this.goods_detail = {};
				this.$api.sendRequest({
					url: '/cashier/storeapi/goods/detail',
					data: {
						goods_id: id
					},
					success: res => {
						if (res.code >= 0) {
							this.goods_detail = res.data;
							this.goods_detail.sku_list[0].goods_name = this.goods_detail.goods_name;
							this.sku_list = this.goods_detail.sku_list;
							if (!type) this.$refs.goodsDetail.open();
						}
						uni.hideLoading();
					}
				});
			},
			goodsStatus(id, status) {
				let arr;
				if (typeof id == 'object') {
					arr = [];
					id.value.length &&
						id.value.forEach((item, index) => {
							arr.push(item.goods_id);
						});

					if (!arr.length) {
						this.$util.showToast({
							title: '请选择要操作的数据'
						});
						return false;
					}
				} else arr = id;
				this.$api.sendRequest({
					url: '/cashier/storeapi/goods/setstatus',
					data: {
						goods_id: arr.toString(),
						status: status
					},
					success: res => {
						this.$util.showToast({
							title: res.message
						});
						if (res.code >= 0) {
							this.$refs.goodsListTable.load();
						}
					}
				});
			},
			goodsSku(id) {
				this.goodsId = id;
				this.getDetail(id, 'goodsSku');
				this.$refs.goodssku.open();
			},
			getDocumentType(type = '') {
				this.$api.sendRequest({
					url: '/stock/storeapi/manage/records',
					data: {
						goods_id: this.goods_detail.goods_id
					},
					success: res => {
						if (res.code >= 0) {
							this.documentTypeList = res.data.list;
						}
					}
				});
			},
			// 日志记录弹窗
			recordopen(id) {
				this.goodsId = id;
				this.$refs.record.open();
			},

			// 弹窗关闭
			close(type) {
				this.$refs[type].close();
			},
			goodsImageError(item) {
				item.goods_image = 'public/uniapp/default_img/goods.png';
			},
			synchronous() {
				this.$refs.scaleGoods.open();
			}
		}
	};
</script>

<style scoped lang="scss">
	@import './public/css/goods.scss';

	// 筛选面板
	.screen-warp {
		padding: 0.15rem 0.15rem 0;
		background-color: #f2f3f5;
		margin-bottom: 0.15rem;

		.common-form-item .form-label {
			width: 1.2rem;
		}

		.common-btn-wrap {
			margin-left: 1.2rem;
		}

		.goods-category .form-input-inline {
			width: 2.8rem;
		}

		.form-inline {
			margin-bottom: 0.15rem;
		}

		.common-form-item {
			margin-bottom: 0;
		}

		.input-append {
			position: relative;

			.form-input {
				padding-right: 0.3rem;
			}

			.unit {
				position: absolute;
				top: 0;
				right: 0.1rem;
				height: 0.35rem;
				line-height: 0.35rem;
			}
		}

		.form-input-inline.split-wrap {
			width: initial;
			background: none;
			border: none;
		}
	}

	.goodslist {
		display: block;
		width: 100%;
		@extend %body-overhide;
		padding: 0.15rem 0.15rem 0;
		background-color: #fff;

		/deep/ .goods-content {
			display: flex;

			.goods-img {
				margin-right: 0.1rem;
				width: 0.5rem;
				height: 0.5rem;
			}

			.goods-name {
				white-space: pre-wrap;
				align-self: baseline;
			}
		}

		.action-btn-wrap {
			.action-item {
				margin-left: 0.1rem;
				color: $primary-color;

				&:first-of-type {
					margin-left: 0;
				}
			}
		}

		/deep/ .batch-action {
			.batch-item {
				margin-right: 0.15rem;
				border: 0.01rem solid rgba(0, 0, 0, 0.2);
				padding: 0.05rem;
				border-radius: 0.03rem;
			}
		}
	}

	// 商品详情
	.goods-detail-wrap {
		background-color: #fff;
		border-radius: 0.05rem;
		padding-bottom: 0.15rem;

		.detail-head {
			padding: 0 0.15rem;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 0.15rem;
			height: 0.45rem;
			border-bottom: 0.01rem solid #e8eaec;

			.iconguanbi1 {
				font-size: $uni-font-size-lg;
			}
		}

		.detail-body {
			width: 9rem;
			height: 4.9rem;
			padding: 0.2rem 0.2rem 0 0.2rem;
			box-sizing: border-box;
			overflow-y: auto;
			position: relative;

			.title {
				font-size: 0.15rem;
				margin-bottom: 0.2rem;
			}

			.information-box {
				display: flex;
				justify-content: space-between;

				.box-left {
					width: 5rem;

					.information {
						width: 100%;
						padding-left: 0.1rem;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						margin-bottom: 0.15rem;

						view {
							color: #303133;
							font-size: 0.14rem;
						}

						view:nth-child(1) {
							width: 0.7rem;
							margin-right: 0.16rem;
							text-align: right;
						}

						view:nth-child(2) {
							flex: 1;
							margin-right: 0.23rem;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}
					}

					.information:last-child {
						margin-bottom: 0.35rem;
					}
				}

				.goods-img {
					width: 2rem;
					height: 2rem;
				}
			}

			.table {
				width: 100%;
				max-height: 2.7rem;
				box-sizing: border-box;

				.single-specification {
					width: 100%;
					max-height: 100%;
					padding-left: 0.1rem;
					box-sizing: border-box;

					.item {
						width: 100%;
						margin-bottom: 0.15rem;
						display: flex;
						align-items: center;

						image {
							width: 0.5rem;
						}

						.name {
							display: flex;
							align-items: center;
							margin-right: 0.16rem;
							width: 0.7rem;
							text-align: right;
						}

						.message {
							width: 74%;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}
					}
				}

				.table-all {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 0.38rem;
					box-sizing: border-box;

					.table-td {
						font-size: 0.14rem;
						text-align: left;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}
				}

				.table-th {
					height: 0.56rem;
					background: #f7f8fa;
				}

				.table-tb {
					width: 100%;
					height: calc(100% - 0.56rem);

					.table-tr {
						height: 0.7rem;
						border-bottom: 0.01rem solid #e6e6e6;
						box-sizing: border-box;

						.table-td {
							image {
								width: 0.5rem;
								height: 0.5rem;
							}

							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							-webkit-box-orient: vertical;
						}
					}
				}
			}
		}
	}
</style>